<template>
  <div class="body-content">
    <PageTable ref="defaultTable"
               action="/user-center/role/findPage"
               :columns="columns">
      <template #opt="scope">
        <div>
          <el-tooltip content="编辑" placement="bottom" v-if="authority(['role:edit'])">
            <el-button type="primary" icon="Edit"
                       size="small"
                       @click="optColumnEvent('edit',scope.row)" circle/>
          </el-tooltip>
          <el-tooltip content="删除" placement="bottom" v-if="authority(['role:delete'])">
            <el-button type="danger" icon="Delete" circle
                       size="small"
                       :disabled="scope.row['isAdmin']=='super'"
                       @click="optColumnEvent('delete',scope.row)"/>
          </el-tooltip>
          <el-tooltip content="查看" placement="bottom">
            <el-button type="primary" plain icon="Document"
                       size="small"
                       circle @click="optColumnEvent('view',scope.row)"/>
          </el-tooltip>
        </div>
      </template>
    </PageTable>
  </div>
</template>
<script lang="ts" setup>

// @ts-ignore
import {getCurrentInstance, ref} from "vue";
// @ts-ignore
const {proxy} = getCurrentInstance()
// @ts-ignore
import {markRaw} from 'vue'
// @ts-ignore
import {ElMessageBox} from 'element-plus'
// @ts-ignore
import {Delete} from '@element-plus/icons-vue'

// pagetable
const defaultTable = ref<any>(null);
const authority = proxy.$authority;

const columns: any = [{
  title: '角色名称',
  field: 'name',
  select: true
}, {
  title: '角色编码',
  field: 'code',
  select: true
},
  {
    title: '操作',
    field: 'opt',
    width: 150,
    align: 'center',
    headerAlign: 'center',
    formatter: {
      type: 'opt'
    }
  },
];

/**
 *
 * @param active 执行的动作(edit,view,delete)
 */
function optColumnEvent(active: string, row: any) {
  switch (active) {
    case 'add': {
      proxy.$Modal.edit({
        title: '新增',
        comps: 'RoleEdit',
        params: row,
        parentContext: proxy
      });
      break;
    }
    case 'edit': {
      proxy.$Modal.edit({
        title: '编辑',
        comps: 'RoleEdit',
        params: row,
        parentContext: proxy
      });
      break;
    }
    case 'view': {
      proxy.$Modal.show({
        title: '详情',
        comps: 'RoleEdit',
        params: row
      });
      break;
    }
    case 'delete': {
      ElMessageBox.confirm(
          '您确定删除这条数据吗?',
          'Warning',
          {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error',
            draggable: true,
            icon: markRaw(Delete),
          }
      ).then(() => {
        // @ts-ignore
        defaultTable.value.deleteTable('/user-center/role/delete', row.id);
      })
      break;
    }
  }
}

defineExpose({
  optColumnEvent
});
</script>
